<template>
    <div class="targetTable">
      <el-button type="primary" @click="addNewtarget" class="addtargetBtn">新增</el-button>
      <div class="tableDiv">
        <el-table :data="tableData" border height="100%">
          <el-table-column label="目标名称" >
            <template slot-scope="scope">
                <el-input placeholder="请输入目标名称" v-model="scope.row.name" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标描述">
            <template slot-scope="scope">
              <el-input type="textarea" :rows="1"  placeholder="请输入描述" v-model="scope.row.detail" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.detail}}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标开始时间" min-width="95">
            <template slot-scope="scope">
              <el-date-picker 
              type="date" 
              style="width:100%"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"  
              v-model="scope.row.beginTime" 
              v-if="scope.row.isEdit">
              </el-date-picker>
              <span v-else>{{scope.row.beginTime | timeFormater}}</span>
            </template>
          </el-table-column>
          <el-table-column label="目标用户">
            <template slot-scope="scope">
              <el-input placeholder="请输入内容" v-model="scope.row.user" v-if="scope.row.isEdit"></el-input>
              <span v-else>{{scope.row.user}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120px">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit">
                <el-button type="text" size="small" @click="cancleTable(scope.row)">取消</el-button>
                <el-button type="text" size="small" @click="confirmTable(scope.row)">确定</el-button>
              </div>
              <div v-else>
                <el-button type="text" size="small" @click="editTable(scope.row)">编辑</el-button>
                <el-button  type="text" size="small" @click="delTable(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        :current-page="currentPage"
        :total="grideTotal"
        :page-size="pageSize"
        :page-sizes="[10, 15, 20, 25]"
        layout="total, prev, pager, next, sizes">
      </el-pagination>
    </div>
</template>
<script>
import axios from "axios"
import moment from "moment"
import {
  deleteRequest,
  postRequest,
  getRequest
} from "@/service/service.js"

export default {
  name:"targetTable",
  components: {},
  props:{},
  data(){
    return {
      tableData:[],
      currentPage:1,
      pageSize:10,
      grideTotal:0,
    }
  },
  mounted() {
    // 获取目标列表
    this.getTargetList()
  },
  filters:{
    timeFormater(data){
      return moment(data).format("YYYY-MM-DD")
    }
  },
  methods:{
    // 获取目标列表
    getTargetList(){
      const that = this
      getRequest('/cx/detail/page/list',{
        pages: that.currentPage,
        size: that.pageSize
      }).then(function ({data}) {
        if (data.code === 200) {
          that.tableData =data.data.records.map(item => {
            return {
              ...item,
              isEdit: false
            }
          });
          that.grideTotal = data.data.total || 0;
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    onSizeChange(size){
      this.currentPage = 1;
      this.pageSize = size;
      // 刷新列表
      this.getTargetList()
    },
    onCurrentChange(page){
      this.currentPage = page;
      // 刷新列表
      this.getTargetList()
    },
    // 添加一行
    addNewtarget(){
      const newtarget = {
        account: "",
        amount: 0,
        completeTime: "",
        deleteFlag: "N",
        description: "",
        income: "",
        mouthRatio: "",
        profitRatio: "",
        user: "",
        yearIncome: "",
        yearRatio: "",
        isEdit: true
      }
      this.tableData.unshift(newtarget)
    },
    // 编辑列表
    editTable(row){
      row.isEdit = true;
    },
    // 删除一行
    delTable(row){
      this.$confirm('确认删除此条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRequest("/cx/detail/delete/",row.id).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({ type: 'success', message: '删除成功'});
            this.getTargetList()
          } else {
            this.$message({ type: 'success', message: '删除失败'});
          }
        }).catch(err => {
          this.$message({ type: 'success', message: '接口报错'});
        })
      })
    },
    // 复制一行
    copyTable(row){
       const newtarget = {
        account: row.account || "",
        amount: row.amount || 0,
        completeTime: row.completeTime || "",
        deleteFlag: row.deleteFlag || "N",
        description: row.description || "",
        income: row.income || "",
        mouthRatio: row.mouthRatio || "",
        profitRatio: row.profitRatio || "",
        user: row.user || "",
        yearIncome: row.yearIncome || "",
        yearRatio: row.yearRatio || "",
        isEdit: true
      }
      this.tableData.unshift(newtarget)
    },
    // 编辑状态--取消按钮
    cancleTable(row){
      this.getTargetList()
    },
    // 编辑状态--确定按钮
    confirmTable(row){
      // 判断必填
      if (!row.account) {
        this.$message({ message: '账号是必填项哦', type: 'warning'});
        return;
      }
      if (!row.amount) {
        this.$message({ message: '账号目标总额是必填项哦', type: 'warning'});
        return;
      }
      if (!row.completeTime) {
        this.$message({ message: '交易完成时间是必填项哦', type: 'warning'});
        return;
      }
      if (!row.description) {
        this.$message({ message: '支付类型是必填项哦', type: 'warning'});
        return;
      }
      if (!row.description) {
        this.$message({ message: '描述是必填项哦', type: 'warning'});
        return;
      }
      if (!row.income) {
        this.$message({ message: '当月收益是必填项哦', type: 'warning'});
        return;
      }
      if (!row.user) {
        this.$message({ message: '用户名是必填项哦', type: 'warning'});
        return;
      }
      if (!row.yearIncome) {
        this.$message({ message: '当年截止到目前的年收益是必填项哦', type: 'warning'});
        return;
      }
      const that =this;
      // 校验完成 发请求新增or修改
      postRequest('/cx/detail/create',row).then(function (res) {
        if (res.data && res.data.code === 200) {
          that.$message({ message: '操作成功', type: 'success'});
          // 刷新列表
          that.getTargetList()
        }
      })
      .catch(function (error) {
        that.$message.error('操作失败');
      });
    },
    // 消费金额输入框 输入限制
    numFilter(row){
      let value = row.amount;
      value = value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
      value = value.replace(/^\./g,""); //验证第一个字符是数字
      value = value.replace(/(\.)\1+/g,'$1'); //只保留第一个., 清除多余的.
      row.amount = value;
    }
  }

}
</script>
<style scoped lang="less">
.targetTable{
  width: 100%;
  height: 100%;
  .addtargetBtn{
    position: fixed;
    top: 55px;
    right: 20px;
    z-index: 100;
  }
  .tableDiv{
    width: 100%;
    height: calc(100% - 40px);
    margin-bottom: 10px;
  }
}

/deep/.el-input--suffix .el-input__inner {
  padding-right: 15px; 
}
/deep/.el-table td.el-table__cell div{
  text-align: center;
}
</style>

